<template>
  <div>
    <div class="tabs">
      <van-tabs
        v-model="activeName"
        @click="changetab"
        sticky
        class="groundtab"
      >
        <van-tab title="关注" name="trends">
          <TrendPage></TrendPage>
        </van-tab>
        <van-tab title="推荐" name="activity">
          <TrendPage></TrendPage>
        </van-tab>
        <van-tab title="同城" name="local">
          <TrendPage></TrendPage>
        </van-tab>
        <template v-slot:nav-right>
          <div class="icons">
            <icon-svg
              icon-class="groundsearch"
              icon-color="#304056"
              class="groundicon"
              @click="search"
            ></icon-svg>
            <icon-svg
              icon-class="groundnotice"
              icon-color="#304056"
              class="groundicon"
              @click="notice"
            ></icon-svg>
          </div>
        </template>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import TrendPage from "@/components/GroundPages/TrendsPage.vue";
export default {
  components: { TrendPage },
  data() {
    return {
      activeName: "trends",
      searchvalue: "",
    };
  },
  methods: {
    changetab() {},
    notice() {},
    search() {},
  },
};
</script>

<style scoped>
.tabs {
  display: flex;
}

.icons {
  display: flex;
  justify-content: space-between;
  width: 60px;
  height: 100%;
  align-items: center;
  margin-left: 100px;
  margin-right: 20px;
}

.groundicon {
  width: 20px;
  height: 20px;
}
.groundtab {
  height: 100%;
}
.groundtab :deep(.van-tab__text--ellipsis) {
  font-size: 20px;
}
</style>